<template>
  <div class="tab-header">
    <span
      :class="tabIndex === index ? 'active' : ''"
      @click="handleTabClick(index)"
      v-for="(item, index) in title"
      :key="item"
    >
      {{ item }}
    </span>
  </div>
</template>
<script>
export default {
  props: ['tabIndex', 'title'], // 接收参数
  data() {
    return {}
  },
  methods: {
    // 数据往下流 逻辑往上走 （爹管的多-数据-逻辑，儿子管的少）
    handleTabClick(index) {
      // tab切换逻辑，放置在父组件中，那我子组件通过父子传递参数，告诉父组件，你去切换数据吧
      // 子父通信
      console.log(index, '子组件')
      this.$emit('tabClick', index)
      // emit: 我要发送一个tabClick的事件，父组件，你来监听这个事件，我就把index给你
    },
  },
}
</script>
